<template>
  <div class="hacevn">
    <el-button class="cheaback" type="text" icon="el-icon-back" @click="hback"
      >返回</el-button
    >
    <el-tabs title="发布文章">
      <!-- 发布文章的对话框 -->

      <el-form
        :model="pubForm"
        ref="pubFormRef"
        label-width="100px"
      >
        <el-form-item label="文章标题" prop="title">
          <el-input
            disabled
            v-model="pubForm.title"
            placeholder="请输入标题"
            style="width: 50%"
          ></el-input>
        </el-form-item>
        <el-form-item label="副标题" prop="text">
          <el-input
          disabled
            v-model="pubForm.originalText"
            placeholder="副标题"
            style="width: 50%"
            maxlength="40"

          ></el-input>
        </el-form-item>
        <el-form-item v-if="this.tits == '1'" label="文章分类" prop="knowledgeType">
           <el-cascader
           disabled
           v-model="this.pubForm.category.type"
           :options="info"
           :props="{ expandTrigger: 'hover' }"
           @change="handleChange"></el-cascader>
        </el-form-item>
        <el-form-item v-else-if="this.tits == '2'" label="避坑篇章" prop="channel">
          <el-select v-model="pubForm.category.channel" placeholder="避坑篇章" disabled>
             <el-option label="设计篇" value="C1"></el-option>
             <el-option label="玄关篇" value="C2"></el-option>
             <el-option label="客餐厅篇" value="C3"></el-option>
             <el-option label="厨房篇" value="C4"></el-option>
             <el-option label="卫生间篇" value="C5"></el-option>
             <el-option label="阳台篇" value="C6"></el-option>
             <el-option label="卧室篇" value="C7"></el-option>
             <el-option label="家具篇" value="C8"></el-option>
          </el-select>
        </el-form-item>
          <el-form-item v-else label="案例风格" prop="category.channel">
           <el-select v-model="pubForm.category.channel" placeholder="案例风格" disabled>
      <el-option label="北欧极简" value="c1"></el-option>
      <el-option label="现代简约" value="c2"></el-option>
      <el-option label="美式田园" value="c3"></el-option>
      <el-option label="日式" value="c4"></el-option>
      <el-option label="新中式" value="c5"></el-option>
      <el-option label="地中海" value="c6"></el-option>
    </el-select>
        </el-form-item>
            <!-- 图片 -->
      <el-form-item v-show="this.tits != '2'" label="文章头图" >
     <el-upload
     disabled
 action=""
 :data="Aliyun"
 :file-list="fileList"
 list-type="picture-card"
 :on-preview="handlePictureCardPreview"

>
 <i class="el-icon-plus" />
</el-upload>
<el-dialog :visible.sync="dialogVisible">
 <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
    

        </el-form-item>
        <el-form-item label="文章内容" prop="detail">
          <!-- 使用 v-model 进行双向的数据绑定 -->
         
           <div class="aaa">
         <!-- 工具栏 -->
  <Toolbar
         
             :editor="editor"
             :defaultConfig="toolbarConfig"
         />
         <!-- 编辑器 -->
         <Editor
      disabled
             :defaultConfig="editorConfig"
             v-model="pubForm.richTextContent"
             @onChange="onChange"
             @onCreated="onCreated"
         />
     </div>
       
     
        </el-form-item>
        
      
      </el-form>
    </el-tabs>
  </div>
</template>

<script>
import { addfit } from "@/api/roles";
// import { ossmessgtr,ossuploa } from '@/api/oss'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

import {ossmessage} from '@/api/oss'


// import { Quill } from 'vue-quill-editor'
// 	import { ImageExtend } from 'quill-image-extend-module'
	// Quill.register('modules/ImageExtend', ImageExtend)


export default {
components: { Editor, Toolbar },//组件引入

  data() {
    return {
      tits:'',
      fileList:[],
      listdatainfo:[],
      toolbarConfig:'',
     editorConfig:'',
  	 		editor: null, //实例
           IA_inputw:'',
     html:'',
      file:'',
      category:'',
      resultGTR:'',
      capture:'',
     dialogImageUrl:'',
     dialogVisible:false,
     Aliyun: {},
     imgUrl:[],
     list:[],
     info:[],
      pubForm: {
        title: "",
        detailUrl:'',
        imageUrls:[],
        category: {
         channel: "string",
         type: "string"
  },
        detail:'',
        images:[],
        text: '',
        originalText:'',
        richTextContent:''
      },
 
    };
  },
  created(){
    this.loavhenge()
    this.loadefc()
  },
  methods: {
   async loavhenge(){
    const { data } = await ossmessage({
        'ossGroup':'CommodityMainImages'
      })
          this.Aliyun = data
      this.tits = this.$route.query.a;
      this.pubForm = this.$route.query.row;
     console.log('s',this.pubForm);
    //  图片回填
       for(let i = 0; i < this.pubForm.images.length; i++){
           this.fileList.push({
           'url': this.pubForm.images[i],
         })
         }
          this.pubForm.detailUrl = ''
    },
   async loadefc(){
        // 渲染分类
       const ress = await addfit()
        //  console.log('74',ress.data);
         this.list = JSON.parse(ress.data)
        //  console.log('74',this.list);
         for(let i =0; i < this.list.length; i++){
           this.info.push({label:this.list[i].name,value:this.list[i].data[0].data[0].category.channel})
           this.info[i].children=[]
          //  console.log(this.info);
           if(this.list[i].data[0].data.length>0){
             for(let j = 0; j < this.list[i].data[0].data.length; j++){
               this.info[i].children.push({label:this.list[i].data[0].data[j].name,value:this.list[i].data[0].data[j].category.type})
              // console.log('741');
            }
              }
          
         }
    },
    handleChange(value){
      this.pubForm.category.channel = value[0]
      this.pubForm.category.type = value[1]
      console.log(this.pubForm.category.type);
    },

  // 图片预览
  handlePictureCardPreview(file) {
   this.dialogImageUrl = file.url
   this.dialogVisible = true
  },

     onCreated(editor) {
       this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
     			        },
   			        onChange(editor) {
                   },

      //返回
    hback() {
      this.$router.back();
    },
  },
     beforeDestroy() { //销毁组件
   		        if (this.editor == null) return
   		        this.editor.destroy() // 组件销毁时，及时销毁编辑器
   	     }
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>

<style scoped>
.hacevn {
  background-color: #fff;
  padding: 20px;
}
.chonegt {
  transform: translateX(140%);
  color: #fff;
  
  background-color: #ff7144;
  border: 1px solid #fff;
}
.escanut {
  width: 70%;
  height: 70%;
}
::v-deep .ql-editor {
  height: 300px;
}
.aaa{
  width: 80%;
}

</style>
